<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网上书城</title>
    <link rel="stylesheet" href="D:\Users\86156\Desktop\Html\day48\书城css.css" type="text/css">
    <style>
        
        .container {
            display: flex;
            align-items: center; /* 垂直居中 */
        }
        img {
            width: 50px; /* 调整图片大小 */
            height: auto;
        }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置容器高度为视口的100% */ 
        }     
        p {
            margin-left: 10px; /* 图片与文字之间的间距 */
        }
        #div2{
            color: rgba(126, 178, 0);
        }
        #div3{
            display: inline-block;
            text-decoration: none;
        }
        #div4 {
            display: inline-block;
            text-decoration: none;
            border: 1px solid rgba(25, 24, 24, 0.362);
            height: 30px; /* 设置固定高度 */
            line-height: 30px; /* 使内容垂直居中 */
            vertical-align: middle; /* 使 inline-block 元素垂直居中对齐 */
            padding: 0 10px; /* 可选：增加内边距以改善内容间距 */
        }
        form {
            border:1px solid black;
            padding: 50px; /* 在表单内部四周添加50像素的内边距，使内容与边框之间有一定的空间 */
            background-color: hsla(62, 97%, 75%, 0.393); 
            width: 80%; /* 设置表单宽度 */
            max-width: 800px; /*最大宽度 */
            margin:auto;
        }
    </style>
      <style>
        /* 定义一个类，用于设置定位 */
        .rightTop {
            position: absolute; /* 绝对定位 */
            top: 0;             /* 距离顶部0像素 */
            right: 0;           /* 距离右侧0像素 */
            padding: 10px;      /* 内边距，根据需要调整 */
        }
    </style>
     <style>
        #app{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #app1{
            padding: 10px;
            background-color: hsla(72, 81%, 44%, 0.393); 
            border-radius: 10px; /* 为表单的边框添加圆角，使其看起来更柔和 */
        }
        table td{
            /* 设置边框 宽度1px */
            border:1px solid rgba(0, 0, 0, 0.102);
            border-collapse:collapse;
        }
        #app2{
            background-color: hsla(72, 81%, 44%, 0.393); 
            height: 80px;
            padding-top: 15px;
            padding-left: 30px;
        }
        #ditu{
            width: 150px;
            height: 50px;
            padding-top: 10px;
            padding-left: 30px;
        }
        #app3{
            float: left;
        }
        #app4{
            padding-top: 12px;
            padding-left: 250px;
        }
    </style>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container1 {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .product {
            width: 20%;
            height: 20%;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .product img {
            width: 100%;
            height: 50%;
        }
        .product-details {
            padding: 10px;
        }
        .product-title {
            font-weight: bold;
            margin-bottom: 5px;
            margin-left: 30%;
        }
        .product-price {
            color: red;
            margin-left: 20%;
        }
    </style>
</head>
<body>
    <div id="main-container">
    <div class="container" id="div2">
        <img src="D:\Users\86156\Desktop\Html\day48\img\IconTexto_WebDev_009.jpg" alt="网上书城图标">
        <p>
            网上书城<br>
            bookstore.com
        </p>
    </div>
    <p class="rightTop">
        <img src="D:\Users\86156\Desktop\Html\day48\img\IconTexto_WebDev_009.jpg" alt="" style="width: 25px; height: 25px;">
        <a href="">购物车</a>|
        <a href="">购物中心</a>|
        <a href="">我的账户</a>|
        <a href="">新用户注册</a>
    </p>
    <div id="top-section">
        <p id="category-section" style="color: aliceblue;">
            <a href="" id="div3">文学</a>  
            <a href="" id="div3">生活</a> 
            <a href="" id="div3">计算机</a> 
            <a href="" id="div3">外语</a>
            <a href="" id="div3">经营</a>
            <a href="" id="div3">励志</a>
            <a href="" id="div3">社科</a>
            <a href="" id="div3">学术</a>
            <a href="" id="div3">少儿</a>
            <a href="" id="div3">艺术</a>
            <a href="" id="div3">原版</a>
            <a href="" id="div3">科技</a>
            <a href="" id="div3">考试</a>
            <a href="" id="div3">生活百科</a>
            <a href="" id="div3" style="color: yellow;">全部目录商品</a>
        </p>
        <div id="app">Search<input type="text" name="Search"><a href="" style="background-color: rgb(21, 142, 21);">搜索</a></div>
    </div>
    <div style="padding-left: 1110px;" >首页>旅游>图书列表</div>
     <form action="">
     <div style="font-size: 20px;">
        商品目录
     </div>
     <hr>
     <div style="float: left;font-size: 20px;">
        计算机类
     </div>
     <div >
        共100种商品
     </div>
     <hr>
     <div id="app1">PRODUCT LIST</div>
     <div class="container1">
        <div class="product-list">
            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\101.jpg" alt="Product 1">
                <div class="product-details">
                    <p class="product-title">时空穿行</p>
                    <p class="product-price">价格：¥100</p>
                </div>
            </div>

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\102.jpg" alt="Product 2">
                <div class="product-details">
                    <p class="product-title">感悟</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div> 

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\103.jpg" alt="Product 3">
                <div class="product-details">
                    <p class="product-title">交往学</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div>

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\104.jpg" alt="Product 4">
                <div class="product-details">
                    <p class="product-title">奶酪</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div>

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\105.jpg" alt="Product 5">
                <div class="product-details">
                    <p class="product-title">当男人</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div>

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\106.jpg" alt="Product 6">
                <div class="product-details">
                    <p class="product-title">别当傻逼</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div>

             <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\107.jpg" alt="Product 7">
                <div class="product-details">
                    <p class="product-title">学会宽容</p>
                    <p class="product-price">价格：¥150</p>
                </div>
            </div>

            <div class="product">
                <img src="D:\Users\86156\Desktop\Html\day48\img\ngcn.jpg" alt="Product 8">
                <div class="product-details">
                    <p class="product-title">花</p>
                    <p class="product-price">价格：¥150</p>
            </div>
            </div>
            <div>
                <a href=""id="div4">上一页</a>
                <a href=""id="div4">1</a>
                <a href=""id="div4">2</a>
                <a href=""id="div4">3</a>
                <a href=""id="div4">4</a>
                <a href=""id="div4">5</a>
                <a href=""id="div4">6</a>
                <a href=""id="div4">7</a>
                <a href=""id="div4">下一页</a>
            </div>
    </form>
        </div>
    </div>
    <div id="app2">
        <div id="app3">
            <img id="ditu" src="D:\Users\86156\Desktop\Html\day48\img\屏幕截图 2024-11-06 152122.png">
        </div>
        <div id="app4">
            CONTACT US
            <br>
            COPYRIGHT 2008⚪BookStore All Rights RESERVED
        </div>
    </div>
    </div>
</body>

</html>